@menuBodyHeight:50px; // sea blue
.nav {
    position: relative;
    width: 50%;
    height: @menuBodyHeight;
    margin: 0 auto;
    .subli {
        position: relative;
        z-index: 110;
        padding: 10px;
    }
    li {
        list-style-type: none;
        float: left;
        position: relative;
        height: 100%;
        line-height: @menuBodyHeight/2;
        width: 33.33%;
        text-align: center;
        .second {
            width: 100%;
            position: absolute;
            text-align: left;
            display: none;
            a {
                // border: 1px solid #1f4560;
                color: rgb(32, 177, 240);
                display: inline-block;
                width: 33%;
                text-align: center;
                // line-height:  @menuBodyHeight/2;
                // height: @menuBodyHeight/2;
                box-sizing: border-box;
            }
            a:hover {
                // border: 1px solid #65C9F6;
                color: rgb(205, 239, 255)
            }
        }
        .help {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border: none;
            z-index: 100;
            background-color:#313848;
        }
    }
    li>a {
        width: 100%;
        height: 100%;
        display: block;
        color: #65caf6;
    }
    li:hover>a {
        color: #1f4560;
    }
    li:hover {
        // background-color: #65caf6;
    }
    li:hover .help {
        // opacity: 0.3;
        display: block;
    }
    li:hover .second {
        display: block;
        bottom: @menuBodyHeight - 1px;
    }
    a {
        color: #65C9F6;
        text-decoration: none;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
    }    
}
